<template>
  <div>
    <el-button type="primary" @click="printAgin">补打标签</el-button>
    <div ref="loctionPrints" class="locationimgBox1" v-if="this.nameFlag">
      <div v-for="(item,index) in picList" class="print-page">
        <img :src="item.qrcode" alt="Image" ref="img" style="margin-right:10px;" />
        <div>{{item.stoUnitCode}}</div>
      </div>
    </div>
    <div ref="loctionPrints" class="locationimgBox" v-else>
      <img v-if="imageUrl" :src="imageUrl" alt="Image" ref="img" />
      <div>{{formUnit.code}}</div>
    </div>
    <el-dialog title="补打标签" :visible="visible" @close="handleClose" width="600px">
      <el-form label-width="68px" label-position="right" ref="formUnitRef" :model="formUnit">
        <el-form-item label="货位号" prop="stoUnitCode">
          <el-input v-model="formUnit.code"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formUnit:{},
        imageUrl: "",
        isImageLoaded: false, // 用于控制图片是否加载完成
        name: '',
        picList: [],
        nameFlag: '',
        visible:false
      };
    },
    methods: {
      //补打
      printAgin(){
        this.visible = true;
      },
      //提交货位
      submit(){
        this.handleClose();
        this.fun();
      },
      //关闭补打页面
      handleClose() {
        this.visible = false;
        // 通过事件通知父组件更新visible值，触发update:visible事件
        this.$nextTick(() => {
          this.$refs.formUnit.resetFields();
        })
      },
      //货位新增时候得打印
      getData(data, name) {
        this.nameFlag = name;
        if (data && data.length > 0) {
          // 执行打印操作
          this.picList = data;
          this.fun();
        } else {
          this.$message.error('没有数据可以打印');
        }
      },
      // 打印方法
      fun(val, code) {
        if ((typeof val) == 'string') {
          this.imageUrl = val;
          this.isImageLoaded = false; // 开始加载图片时，设置为未加载

          // 创建一个新的 Image 对象来检测图片是否加载完成
          const img = new Image();
          img.src = val;

          // 图片加载成功时触发
          img.onload = () => {
            this.isImageLoaded = true; // 图片加载完成，更新状态
            this.name = code;
            this.$nextTick(() => {
              // 确保图片已渲染到 DOM，再进行打印
              if (this.isImageLoaded) {
                this.$print(this.$refs.loctionPrints);
              }
            });
          };

          // 如果图片加载失败
          img.onerror = () => {
            this.$message.error('图片加载失败');
          };
        } else {
          this.$nextTick(() => {
            // 确保图片已渲染到 DOM，再进行打印
            this.$print(this.$refs.loctionPrints);
          });
        }
      }
    }
  };
</script>


<style scoped lang="scss">
  /* 展示模式样式 */
  .locationimgBox1 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
  }

  .locationimgBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    /* 增加一些空间，让内容更大 */
  }

  .locationimgBox img {
    width: 100px;
    /* 设置图像宽度 */
    height: 100px;
    /* 设置图像高度，保持比例 */
    object-fit: contain;
  }

  .print-page {
    page-break-before: always;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .locationimgBox div {
    font-size: 24px;
    /* 增加字体大小 */
    margin-left: 20px;
  }
</style>

<style scoped>
  @media print {

    /* 设置纸张大小为100mm x 40mm */
    @page {
      size: 100mm 40mm;
      margin: 0;
    }

    body {
      font-family: 'Arial', sans-serif;
      font-size: 12px;
      color: #333;
      margin: 0;
      padding: 0;
    }

    .locationimgBox1 {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
    }

    /* 打印模式样式 */
    .locationimgBox {
      display: flex;
      justify-content: center !important;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 2mm;
      /* 适应小票纸大小，减少内边距 */
    }

    .locationimgBox img {
      width: 20mm !important;
      /* 设置图像宽度 */
      height: 20mm !important;
      /* 设置图像高度 */
      object-fit: contain;
    }

    .print-page {
      page-break-before: always !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .locationimgBox div {
      font-size: 16px !important;
      /* 打印时适当减小字体 */
    }

    /* 强制去掉浏览器可能存在的任何内外边距 */
    body,
    html {
      margin: 0;
      padding: 0;
    }

    /* 强制清除任何浏览器的默认样式，确保打印内容从页面顶部开始 */
    body {
      margin-top: 0;
    }
  }
</style>
